<template>
  <div class="m-page">
    <HeaderBar></HeaderBar>
    <div class="top">
      <div style="position:relative;">
        <el-image :src="src"></el-image>
        <div class="head">
          <!--头像-->
          <div class="face">
            <el-avatar :size="70" :src="userInfo.Face | toFaceUrl">
              <el-avatar icon="el-icon-user-solid" :size="70"></el-avatar>
            </el-avatar>
          </div>
          <!--昵称和个签-->
          <span class="font-name">{{userInfo.Name}}</span>
          <span class="font-sign">{{userInfo.Sign}}</span>
        </div>
      </div>
      <el-menu :default-active="activedMenu($route.path)" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-video-camera" style="color:#609a8b"></i>
          <span>视频</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-star-off" style="color:#d29da7"></i>
          <span>收藏</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-upload2" style="color:#e3c0aa"></i>
          <span>投稿</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-chat-dot-round" style="color:#7daebd"></i>
          <span>消息</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting" style="color:#c79fa7"></i>
          <span>设置</span>
        </el-menu-item>
        <div class="follow-count">
          <el-menu-item index="6">
            <span>关注</span>
            <span>{{followingCount}}</span>
          </el-menu-item>
          <el-menu-item index="7">
            <span>粉丝</span>
            <span>{{followerCount}}</span>
          </el-menu-item>
        </div>
      </el-menu>
      <div>
        <router-view></router-view>
      </div>
    </div>
    <el-footer class="footer">
      <p>Hi!弹幕 - 2021</p>
    </el-footer>
  </div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar";
import Cookies from 'js-cookie'
import { getFollowCount } from "@/api/relations";
import { imgUrl, toFaceUrl } from "@/utils/url";
export default {
  data() {
    return {
      src: imgUrl + "background.webp",
      followingCount: 0,
      followerCount: 0,
    };
  },
  components: {
    HeaderBar,
  },
  computed: {
    userInfo() {
      if (Cookies.get('userInfo')) {
        return JSON.parse(Cookies.get('userInfo'));
      } else {
        return null;
      }
    },
  },
  methods: {
    activedMenu(val) {
      switch (val) {
        case "/mine/video":
          return "1";
        case "/mine/favorites":
          return "2";
        case "/mine/upload":
          return "3";
        case "/mine/message/system":
          return "4";
        case "/mine/message/user":
          return "4";
        case "/mine/setting":
          return "5";
      }
    },
    handleSelect(key) {
      switch (key) {
        case "1":
          this.$router.push({ name: "myVideo" });
          break;
        case "2":
          this.$router.push({ name: "favorites" });
          break;
        case "3":
          this.$router.push({ name: "upload" });
          break;
        case "4":
          this.$router.push({ name: "systemMsg" });
          break;
        case "5":
          this.$router.push({ name: "setting" });
          break;
        case "6":
          this.$router.push({ name: "following" });
          break;
        case "7":
          this.$router.push({ name: "follower" });
          break;
      }
    },
    _getFollowCount() {
      getFollowCount(this.userInfo.Uid).then((res) => {
        this.followingCount = res.data.data.following_count;
        this.followerCount = res.data.data.follower_count;
      });
    },
  },
  created() {
    this._getFollowCount();
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
  },
};
</script>

<style>
.m-page{
  background-color: #e9e9e9;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.top {
  margin: auto;
  width: 1280px;
}

.face {
  position: absolute;
  bottom: 20px;
  left: 15px;
}

.font-name {
  position: absolute;
  bottom: 55px;
  left: 100px;
  font-size: 18px;
  font-weight: bold;
  color: snow;
}

.font-sign {
  position: absolute;
  bottom: 30px;
  left: 100px;
  font-size: 14px;
  color: #2e2e2e;
}

.follow-count {
  display: flex;
  float: right;
}

.footer{
  height: 10px;
  background-color: #2d8cf0;
}

.footer>p{
  text-align: center;
  color: #fff;
  font-size: 20px;
}
</style>